<template>
    <div>
        <div v-if="login">
            <div class="layout">
                <Layout :style="{minHeight: '100vh'}">
                    <Header>
                        <Menu mode="horizontal" theme="dark" active-name="1">
                            <div class="layout-logo" style="color:#fff;font-size:20px;line-height:30px;width:auto;padding:0 20px;" >vue-project</div>
                            <div class="layout-nav" :username="formInline.user">
                                <div style="color:#fff;float:right;margin-right:5%;">
                                    <Icon type="person"></Icon>
                                        {{formInline.user}}，欢迎你！
                                    <span @click="checkLogin(false);" style="margin:0 15px;cursor:pointer">
                                        <Icon type="ios-keypad"  style="margin-right:5px"></Icon>
                                        退出
                                    </span>
                                </div>
                            </div>
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider hide-trigger :style="{background: '#fff'}">
                            <Menu :active-name="activeName" theme="light" width="auto" :open-names="['1']">
                                <Submenu name="1">
                                    <template slot="title">
                                        <Icon type="ios-navigate"></Icon>
                                        管理模块
                                    </template>
                                    <MenuItem name="/users"><router-link to="users">用户管理</router-link></MenuItem>
                                    <MenuItem name="/cate"><router-link to="cate">分类管理</router-link></MenuItem>
                                    <MenuItem name="/product"><router-link to="product">产品管理</router-link></MenuItem>
                                    <MenuItem name="/news"><router-link to="news">新闻管理</router-link></MenuItem>
                                    <MenuItem name="/comment"><router-link to="comment">评论管理</router-link></MenuItem>
                                    <MenuItem name="/upload"><router-link to="upload">上传管理</router-link></MenuItem>
                                </Submenu>
                                <Submenu name="2">
                                    <template slot="title">
                                        <Icon type="ios-keypad"></Icon>
                                        Item 2
                                    </template>
                                    <MenuItem name="2-1">Option 1</MenuItem>
                                    <MenuItem name="2-2">Option 2</MenuItem>
                                </Submenu>
                                <Submenu name="3">
                                    <template slot="title">
                                        <Icon type="ios-analytics"></Icon>
                                        Item 3
                                    </template>
                                    <MenuItem name="3-1">Option 1</MenuItem>
                                    <MenuItem name="3-2">Option 2</MenuItem>
                                </Submenu>
                            </Menu>
                        </Sider>
                        <Layout :style="{padding: '0 24px 24px'}">
                            <Breadcrumb :style="{margin: '24px 0'}">
                                <BreadcrumbItem>Home</BreadcrumbItem>
                                <BreadcrumbItem>Components</BreadcrumbItem>
                                <BreadcrumbItem>Layout</BreadcrumbItem>
                            </Breadcrumb>
                            <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                                <router-view></router-view>
                                
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </div>
        </div>
        <div v-else  style="width:500px;margin:200px auto">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                <FormItem prop="user">
                    <Input type="text" v-model="formInline.user" placeholder="Username">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="formInline.password" placeholder="Password">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
                </FormItem>
            </Form>          
        </div>        
    </div>
    
</template>    
<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";
export default {
    data(){
        return {
            activeName:'/',
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                    { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                ]
            },
        }
    },
    computed:{
        ...mapGetters(['login'])
    },
    methods:{
        ...mapActions(['checkLogin']),        
        /* encodestring(){
            let password='123456';
            console.log(SHA256(password).toString());
            console.log(this.$store.getters.login);
        }, */
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('登录成功!');
                    this.checkLogin(true); 
                } else {
                    this.$Message.error('用户名或密码错误!');
                }
            })
        } ,
        loginOut(){
            console.log(123);
            this.checkLogin(false); 
        }
    },
    created(){
        //console.log(this.$route.path);
        this.activeName=this.$route.path;
        // this.checkLogin(true); 
    }
};
</script>

<style scoped>
    .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    }
    .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    }
    .layout-nav {
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;

       
    }
</style>
